import Watcher from "../watcher.js";

export default function mount(vm) {
  // 获取根节点
  let { el } = vm.$options;
  el = document.querySelectorAll(el);
  // el[0].childNodes 默认情况下是 NodeList类数组,输出可看,不能直接进行遍历需要转换为普通数组
  // 把vm实例传下去 方便替换数据
  compuleNode(Array.from(el[0].childNodes), vm);
}

// 查找变量并替换
function compuleNode(nodes, vm) {
  // node 是我们拿到的所有根节点下的dom
  // 遍历dom节点
  for (const node of nodes) {
    // 节点有区别:
    // nodeType === 1 表示是元素div span这些元素等
    // nodeType === 3 表示是文本 也就是最后一级
    if (node.nodeType === 3 && node.textContent.match(/{{(.*)}}/)) {
      // node.textContent.match(/{{(.*)}}/) 会对我们的结果进行分组 {{name}}  {{age}}
      // 通过正则 可以使用下标获取结果
      // console.log('RegExp.$1 ==> ', RegExp.$1);
      // 既然是文本 那么我们就可以直接查找替换元素即可
      // <div>{{name}}</div>  我们要判断他是否有 {{}}
      //  是文本节点 并且有 {{(.*)}} 因为我们的变量是通过双括号包含的
      compuleTextNode(node, vm);
    }

    // 如果是dom元素 就递归遍历查找他的子元素
    if (node.nodeType === 1) {
      compuleNode(node.childNodes, vm);
    }
  }
}

// 替换数据
function compuleTextNode(node, vm) {
    // 获取匹配的结果 
    // 替换dom得值
    const key = RegExp.$1
    // 写一个回调 专门修改当前这个节点的数据
    function cb() {
        // 如果 vm[key] 有数据 就返回数据 没有就返回 未找到
        node.textContent = vm[key] ? JSON.stringify(vm[key]) : `${key} 未定义`;
    }

    new Watcher(cb)
}